<template>
  <div class="full-height bg-white page-content content">
    <div class="margin-20">
      <q-btn
        class="btn"
        outline
        color="primary"
        @click="addMaintenanceItem(null)"
      >新增</q-btn>
    </div>
    <q-table
      :data="tableData"
      :columns="columns"
      row-key="id"
      class="myTable scroll stick-last-col"
      :loading="isTableLoading"
      :pagination.sync="pagination"
      :hide-bottom="tableData.length > 0"
      color="primary"
    >
      <template v-slot:header-cell-createTime="props">
        <q-th
          :props="props"
          class="sortable sorted-icon"
          @click="onSeletByTime"
        >
          {{props.col.label}}
          <q-icon
            class="q-table__sort-icon"
            :name="sortByTime ? 'arrow_upward' : 'iconfont iconjiantoupaixu'"
          ></q-icon>
        </q-th>
      </template>
      <template v-slot:body-cell-index="props">
        <q-td>
          {{props.row.__index + 1}}
        </q-td>
      </template>
      <template v-slot:body-cell-createTime="props">
        <q-td>
          {{ props.row.createTime | toTime }}
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td class="operations" style="width:100px">
          <div class="btn-group text-center">
            <table-btn btnType="detail" @click="detailMaintenanceItem(props.row)"/>
            <table-btn btnType="edit" @click="addMaintenanceItem(props.row)"/>
            <table-btn btnType="delete" @click="deleteMaintenanceItem(props.row)"/>
          </div>
        </q-td>
      </template>
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getList"/>
    <!-- 新增编辑 -->
    <add-edit-maintenance-item-dialog
      :show="isShowAddEditMaintenanceItemDialog"
      :maintenanceItemData="maintenanceItemData"
      @close="onRefresh"
    />
    <!-- 详情 -->
    <detail-maintenance-item-dialog
      :show="isShowDetailMaintenanceItemDialog"
      :maintenanceItemData="maintenanceItemData"
      @close="onRefresh"
    />
  </div>
</template>
<script>
import addEditMaintenanceItemDialog from './maintenance-item/add-edit-maintenance-item-dialog'
import detailMaintenanceItemDialog from './maintenance-item/detail-maintenance-item-dialog'
import { getMaintenaceProgramsList, deleteMaintenaceProgramsById } from 'src/boot/maintenance/maintenance-item'
// import MAINTENANCEMIXIN from './maintenance-mixin'
import _ from 'lodash'
export default {
  name: 'maintenance-item',
  components: {
    addEditMaintenanceItemDialog,
    detailMaintenanceItemDialog
  },
  // mixins: [MAINTENANCEMIXIN],
  data () {
    return {
      tableData: [],
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      sortByTime: false,
      sort: 0,
      isTableLoading: false,
      isShowAddEditMaintenanceItemDialog: false,
      isShowDetailMaintenanceItemDialog: false,
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'name', label: '项目名称', align: 'left', field: 'name' },
        {
          name: 'deviceTypeName',
          label: '设备类型',
          align: 'left',
          field: 'deviceTypeName'
        },
        { name: 'maintenanceTypeName', label: '保养类型', align: 'left', field: 'maintenanceTypeName' },
        {
          name: 'createTime',
          label: '创建时间',
          align: 'left',
          field: 'createTime'
        },
        {
          name: 'operations',
          label: '操作',
          align: 'center',
          field: 'operations'
        }
      ],
      maintenanceItemData: {}
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 新增
    addMaintenanceItem (row) {
      this.maintenanceItemData = _.isNil(row) ? {} : row
      this.isShowAddEditMaintenanceItemDialog = true
    },
    // 详情
    detailMaintenanceItem (row) {
      this.maintenanceItemData = row
      this.isShowDetailMaintenanceItemDialog = true
    },
    // 删除
    deleteMaintenanceItem ({ id }) {
      this.$utils.showMessage(
        'icontubiao-28',
        '确认要删除此保养项目吗？',
        () => {
          this.onDeleteRowById(id)
        },
        true
      )
    },
    // 时间排序
    onSeletByTime () {
      this.sortByTime = !this.sortByTime
      this.sort = this.sortByTime ? 1 : 0
      this.getList()
    },
    // 删除保养项目
    onDeleteRowById (id) {
      deleteMaintenaceProgramsById(id).then((res) => {
        this.$message.success('删除成功')
        this.getList()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取数据
    getList () {
      const params = {
        ...this.pagination,
        sort: this.sort
      }
      this.isTableLoading = true
      getMaintenaceProgramsList(params).then((res) => {
        this.isTableLoading = false
        const ret = res.data
        this.tableData = ret.list
        this.pagination.rowsNumber = ret.total
      }).catch((err) => {
        this.isTableLoading = false
        console.log(err)
      })
    },
    // 刷新
    onRefresh (isRefresh = true) {
      this.maintenanceItemData = {}
      this.isShowAddEditMaintenanceItemDialog = false
      this.isShowDetailMaintenanceItemDialog = false
      isRefresh && this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.btn {
  padding: 0;
  min-width: 96px;
  min-height: 32px;
  height: 32px;
  line-height: 1;
  font-size: 14px;
}
</style>
